<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<title>添加文章信息</title> 
#@includeBaseCss()
<style type="text/css">
.txt{  border:1px solid #cdcdcd;}
/*.btn{ background-color:#FFF; border:1px solid #CDCDCD;}*/
.file{ position:absolute; top:0; right:80px; height:24px; filter:alpha(opacity:0);opacity: 0;width:260px }
</style>
</head>

<body class="no-skin">
	<div class="main-container" id="main-container">
		<script type="text/javascript">
				// 检查 class=main-container这个div层是不是相对窗口固定。
				try{ace.settings.check('main-container' , 'fixed')}catch(e){}
		</script>

		<div class="page-content">
			<!-- 页面内容开始 -->
			<div class="widget-main">

				<form class="form-horizontal" id="validation-form" method="post">
						<input type="hidden" name="obj.id" id="id" value="#(action=='add'?'':item.id)" />
					<div class="form-group">
						<label class="control-label col-xs-12 col-sm-3 no-padding-right"
							for="versionNo">文章标题:</label>

						<div class="col-xs-12 col-sm-9">
							<div class="clearfix">
								<input type="text" name="obj.title" id="title"
									class="col-xs-12 col-sm-6" value="" />
							</div>
						</div>
					</div>

					<div class="form-group">
						<label class="control-label col-xs-12 col-sm-3 no-padding-right"
							for="os">文章类别:</label>

						<div class="col-xs-12 col-sm-9">
							<div class="clearfix">
								<select name="obj.type_id" id="type_id" class="col-xs-9 col-sm-6" >
									#for(item : types)
									<option value="#(item.id)" >#(item.name)</option>
									#end
								</select>
							</div>
						</div>
					</div>

					<div class="form-group">
						<label class="control-label col-xs-12 col-sm-3 no-padding-right" for="os">
							文章icon:
						</label>
						<div class="col-xs-12 col-sm-9">
							<div class="input-group col-xs-12 col-sm-9 ">
								<input type='text' name='obj.icon' id='icon' value="#(item.icon??)" class="col-xs-12 col-sm-9" /> 
								<input type='button' class='btn btn-default' value='浏览'   style="margin-right: 0.1em;" />
								<input type="file" name="icon"  class="file" id="iconField" onchange="document.getElementById('icon').value=this.value" />
								<input type="submit" name="submit" id="uploadicon" class="btn btn-default"  value="上传" />
							</div>
							<div class="input-group " style="margin-top:.5em; margin-bottom: 0.8em;">
								<img src="#(ctx)/res/img/local/nopic.jpg" id="img-thumbnail-icon" width="150">
							</div>   
						</div>
					</div>

					<div class="form-group">
						<label class="control-label col-xs-12 col-sm-3 no-padding-right"
							for="versionNo">文章来源:</label>

						<div class="col-xs-12 col-sm-9">
							<div class="clearfix">
								<input type="text" name="obj.source" id="source"
									class="col-xs-12 col-sm-6" value="" />
							</div>
						</div>
					</div>

					<div class="form-group">
						<label class="control-label col-xs-12 col-sm-3 no-padding-right"
						for="versionNo">文章排序:</label>

						<div class="col-xs-12 col-sm-9">
							<div class="clearfix">
								<input type="number" name="obj.top" id="top"
								class="col-xs-12 col-sm-6" value="" />
							</div>
						</div>
					</div>


 
					<div class="form-group">
						<label class="control-label col-xs-12 col-sm-3 no-padding-right"
							for="content">新闻内容:</label>

						<div class="col-xs-12 col-sm-9">

							   <script id="tipeditor" type="text/plain" style="width:80%;height:500px;">
							   	<!-- #(item) -->
							   </script>
				 				<input type="hidden" name="obj.content" id="content">
						</div>
					</div>

					<div class="clearfix form-actions" align="center">
						<div class="col-md-offset-3 col-md-9">
							<button id="submit-btn" class="btn btn-info" type="submit"
								data-last="Finish">
								<i class="ace-icon fa fa-check bigger-110"></i> 提交
							</button>

							&nbsp; &nbsp; &nbsp;
							<button class="btn" type="reset">
								<i class="ace-icon fa fa-undo bigger-110"></i> 重置
							</button>
						</div>
					</div>

				</form>
			</div>
			<!-- /.widget-main -->
		</div>
		<!-- /.page-content -->
	</div>
	<!-- /.main-container -->
	
	#@includeBaseJs()
	<script src="/res/ace-1.3.3/assets/js/ace-extra.js"></script>
	<script src="/res/uploadify/jquery.uploadify.min.js" type="text/javascript"></script>
	<script type="text/javascript">
		
			jQuery(function($) {

			UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
			UE.Editor.prototype.getActionUrl = function(action) {
				if (action == 'uploadimage' || action == 'uploadscrawl'
						|| action == 'uploadimage') {
						return 'http://localhost:8060/ueditor/config?action=uploadimage"';/*自定义上传action*/

				} else if (action == 'uploadvideo') {
					return 'http://localhost:8080/ljquery/upload.jsp';
				} else {
					return this._bkGetActionUrl.call(this, action);
				}
			}
				var tip = UE.getEditor('tipeditor',{
					toolbars:[
					['fullscreen', 'source', 'undo', 'redo', 'bold', 'italic','simpleupload',
					'underline','fontborder', 'backcolor', 'fontsize', 'fontfamily', 
					'justifyleft', 'justifyright','justifycenter', 'justifyjustify', 
					'strikethrough','superscript', 'subscript', 'removeformat',
					'formatmatch','autotypeset', 'blockquote', 'pasteplain', '|',
					'forecolor', 'backcolor','insertorderedlist', 'insertunorderedlist', 
					'selectall', 'cleardoc', 'link', 'unlink','emotion', 'help']
					],
					autoHeight:true,
			        autoHeightEnabled: false,//是否自动长高
			        autoFloatEnabled: false,//浮动是离浏览器的高度
			        imageScaledEnable:true,//图片能否自动缩放
			        allowDivTransToP:false//是否容许div转换为p 标签
				});

				// 添加图片
				      $("#uploadicon").click(function () {
		                      //效验上传图片类型
		                      var ths=$('#iconField');
		                      if (ths.val().length <= 0) {
		                          alert("请上传图片");
		                          return false;
		                      } else if(!/\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(ths.val())){
		                          alert("图片类型必须是.gif,jpeg,jpg,png中的一种");
		                          ths.val("");
		                          return false;
		                      }
		                      //效验成功调用异步上传函数
		                      ajaxFileUpload();
		                      return true;
              			})
   
		      /**
		       * ajaxFileUpload    JQuery异步上传插件
		       */
		       function ajaxFileUpload() {
		       	$.ajaxFileUpload
		       	({
		                      url: "/artical/list/uploadimg", //用于文件上传的服务器端请求地址
		                      type: 'post',
		                      data: {"type":"icon"},
		                      secureuri: false, //是否需要安全协议，一般设置为false
		                      fileElementId: 'iconField', //文件上传域的ID
		                      dataType: 'json', //返回值类型 一般设置为json
		                      success: function (data, status)  //服务器成功响应处理函数
		                      {

		                                  // console.log(data);

		                                  var srcvalue = data.data.filePath;
		                                  console.log(srcvalue);
		                                  $("#img-thumbnail-icon").attr('src',srcvalue); 
		                                  $("#icon").val(srcvalue);

		                              },
		                      error: function (data, status, e)//服务器响应失败处理函数
		                      {
		                      	alert(e);
		                      }
		                  })
		       	return false;
		       }
				
				var $validation = true;
				
				$('#validation-form').validate({
					errorElement: 'div',//使用什么标签标记错误
					errorClass: 'help-block',//指定错误提示的css类名,可以自定义错误提示的样式
					focusInvalid: true,//提交表单后,未通过验证的表单会获得焦点
					//表单验证规则
					rules: {
						remark:{//id
							required: true//必填
						},
						status:{
							required: true,
							number:true
						} 
						
					},
					//自定义的提示信息
					messages: {
						remark:{
							required: "第一项不能为空",
						},
						status:{
							required: "自然不能为空",
							number:"自然必须为整数"
						} 
					},
					//可以给未通过验证的元素加效果,闪烁等
					highlight: function (e) {
						$(e).closest('.form-group').removeClass('has-info').addClass('has-error');
					},
					//要验证的元素通过验证后的动作,
					success: function (e) {
						$(e).closest('.form-group').removeClass('has-error');
						$(e).remove();
					},
					//跟一个函数,可以自定义错误放到哪里
					errorPlacement: function (error, element) {
						if(element.is(':checkbox') || element.is(':radio')) {
							var controls = element.closest('div[class*="col-"]');
							if(controls.find(':checkbox,:radio').length > 1) controls.append(error);
							else error.insertAfter(element.nextAll('.lbl:eq(0)').eq(0));
						}
						else if(element.is('.select2')) {
							error.insertAfter(element.siblings('[class*="select2-container"]:eq(0)'));
						}
						else if(element.is('.chosen-select')) {
							error.insertAfter(element.siblings('[class*="chosen-container"]:eq(0)'));
						}
						else error.insertAfter(element.parent());
					},
					//通过验证后运行的函数,里面要加上表单提交的函数,否则表单不会提交
					submitHandler: function (form) {
						$('#content').val(UE.getEditor('tipeditor').getContent());

						var $form = $("#validation-form");
						var $btn = $("#submit-btn");
						
						//验证是否提交中，还未处理完
						if($btn.hasClass("disabled")) return;
						
						//准备要提交的数据
						var submitData =$form.serializeArray();
					 
						//禁用提交按钮避免重复提交
						// $btn.addClass("disabled");
						//开始提交
						$.post("/artical/list/saveartical", submitData,function(data) {
							//放开提交按钮
							$btn.removeClass("disabled");
							//处理返回结果
							if(data.code==0){
								
	        					// window.parent.reloadGrid(); //重新载入
	        					layer.msg("保存成功", {
	        					    icon: 1,
	        					    time: 2000 //2秒关闭（如果不配置，默认是3秒）
	        					},function(){
	        						//关闭弹出层
	        						window.history.back(-1);
	        					});
	        					
	        				}else{
	        					layer.msg(data.msg, {
	        					    icon: 2,
	        					    time: 2000 //2秒关闭（如果不配置，默认是3秒）
	        					},function(){ });
	        					
	        				}
						},"json");
						return false;
					},
					//验证不通过时执行
					invalidHandler: function (form) {
						layer.msg("信息填写有误，再检查一下", {
    					    time: 2000 //2秒关闭（如果不配置，默认是3秒）
    					},function(){ });
					}
				});
			});
			
			//关闭弹出层
			function closeView(){
				var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
				parent.layer.close(index); //再执行关闭 
			}
			
		</script>
</body>
</html>